<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mydemo</title>
	<style>
		body,div {margin:0;padding:0;}
		html,body {height:100%;}
		#box {width:50px;height:50px;background:#0ff;position:absolute;left:300px;top:60px;}
	</style>
	<script>
		window.onload = function() {
			var oBox = document.getElementById("box");
			document.onkeydown = function(ev) {
				var oEvent = ev || window.event;
				var w = document.body.offsetWidth;
				var h = document.body.offsetHeight;
				var state = 0;
				switch(oEvent.keyCode) {
					case 37: //left
						//向左移动
						//left();
						(oBox.offsetLeft == 0) ?
						oBox.style.left = 0 :
						oBox.style.left = (oBox.offsetLeft - 10) + "px";
						break;
					case 38: //up 或者 ctrl + up
						if(oEvent.ctrlKey == 1) {
							oBox.style.width = oBox.offsetWidth + 10 + "px";
							oBox.style.height = oBox.offsetHeight + 10 + "px";
						}
						else {
							(oBox.offsetTop == 0) ?
							oBox.style.top = 0 :
							oBox.style.top = (oBox.offsetTop - 10) + "px";
						}
						break;
					case 39: //right
					console.log(w);
					console.log(oBox.offsetWidth);
					console.log(document.body.clientWidth);
						(oBox.offsetLeft >= (w-oBox.offsetWidth)) ?
						(oBox.style.left = w-oBox.offsetWidth) :
						oBox.style.left = (oBox.offsetLeft + 10) + "px";
					console.log(oBox.style.left);
						break;
					case 40: //down 或者 ctrl + down
						(oEvent.ctrlKey == 1) &&
						(oBox.style.width = (oBox.offsetWidth - 10) + "px",
						oBox.style.height = (oBox.offsetHeight - 10) + "px");

						(oBox.offsetTop >= (h-oBox.offsetHeight)) ?
						(oBox.style.top = (h-oBox.offsetHeight)) :
						oBox.style.top = (oBox.offsetTop + 29) + "px";
						break;
					case 49: //ctrl + 1
						(oEvent.ctrlKey == 1) && (oBox.style.background = "#0f0");
						return false;
						break;
					case 50: //ctrl + 2
						(oEvent.ctrlKey == 1) && (oBox.style.background = "#ff0");
						return false;
						break;
					case 51: //ctrl + 3
						(oEvent.ctrlKey == 1) && (oBox.style.background = "#00f");
						return false;
						break;
					default:
						break;
				}
				// function left() {
				// 	(oBox.offsetLeft == 0) ?
				// 	oBox.style.left = 0 :
				// 	oBox.style.left = (oBox.offsetLeft - 10) + "px";
				// }

			}

			
		}
	</script>
</head>
<body>
<pre>
	红色方块为键盘操作区域，您可以进行如下操作：
	
	上：↑ 下：↓ 左：← 右：→
	
	Ctrl + 1 : 背景变为绿色
	Ctrl + 2 : 背景变为黄色
	Ctrl + 3 : 背景变为蓝色
	Ctrl + ↑ : 放大
	Ctrl + ↓ : 缩小
</pre>
	<div id="box"></div>
</body>
</html>